<template>
  <view class="box">
    <BaseNavbar :title="title" />
    <view class="lottery-title">
      <text>{{vPointName}}名称：{{ hotel_num }}</text>
    </view>
    <view class="lottery-numpie">
      <view class="lot-num-pie">
        <text>设备数量</text>
        <text class="lot-num-color">{{ total }}</text>
      </view>
      <view class="lot-num-pie">
        <text>剩余时长</text>
        <text class="lot-num-color">00 ：{{ tims(times) }}</text>
      </view>
      <view class="lot-num-pie">
        <text>剩余次数</text>
        <text class="lot-num-color">{{ nums(countnum) }}</text>
      </view>
    </view>

    <view class="lottery-bakc">
      <image class="logoImg" :src="src" />
      <input class="lottory-dis-input" disabled="false" v-model="lottaryList[a].device_sn" focus />
    </view>
    <view>
      <text> 请输入随机任务次数 </text>
    </view>
    <view>
      <input class="lottory-num-input" @change="handleChange" v-model="countnum" :disabled="false" focus />
    </view>
    <view class="btn">
      <BaseButton type="primary" @onClick="ok()">开启随机任务</BaseButton>
      <view class="enter" :style="{ pointerEvents: enters ? 'none' : 'auto' }" @onClick="outLogin">
        <BaseButton type="eixt">停止随机任务</BaseButton>
      </view>
    </view>
    <!-- <view class="lottery-btn">
      <input class="lotteryInp" placeholder="0" />
      <view class="btn" @click="ok()">抽奖</view>
    </view> -->
    <BaseModal :show.sync="isShowDelModalckLotter" @confirm="confirmDelckLotter" content="确认要开启随机任务吗" title="温馨提示" />
  </view>
</template>

<script>
import BaseNavbar from "@/components/base/BaseNavbar.vue";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseModal from "@/components/base/BaseModal.vue"
export default {
  // name:'lottery',
  components: { BaseNavbar, BaseButton, BaseModal },

  data() {
    return {
      src: require("@/static/img/lottery.png"),
      title: "随机任务",
      lottary: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      lottaryList: [],
      //定义抽奖的索引
      a: 0,
      //声明计时器定时器
      lottaryTime: null,
      lottaryOut: null,
      //定义开关
      off: false,
      //定义次数

      countnum: 0,
      count: 0,
      //设置节流开关
      offbtn: true,

      //声明里面的定时器，
      yanshiOut: null,
      //
      fromData: "",
      dianwei: 0,
      hotel_id: 0,
      //总数
      total: 0,
      //计时器
      times: 59,
      // 倒计时
      timesTim: null,
      //场地放名称
      hotel_num: "",
      //停止任务。
      exit: false,
      //机器是否开机
      oks: false,
      //当前机器索引
      index: 0,
      //给停止加个开关
      enters: false,
      // 开启随机任务弹窗
      isShowDelModalckLotter: false,

    };
  },

  methods: {
    ok() {
      console.log('在线设备',this.lottaryList.length)
      if (this.lottaryList.length<1){
        this.isShowErr("没有在线设备");
      }else{
        this.isShowDelModalckLotter = true
      }

    },
    /* 随机任务确认 */
    confirmDelckLotter() {
      if (this.offbtn && this.countnum !== 0) {
        this.a = 0;
        this.count = 0;
        this.enter();
      }
      if (this.offbtn) {
        this.exit = true;
      }
    },
    //抽奖逻辑
    enter() {
      this.offbtn = false;
      let random = Math.floor(Math.random() * this.lottaryList.length);
      this.lottaryTime = setInterval(() => {
        this.times = 59;
        if (this.off) {
          if (random == this.a) {
            // console.log(this.a, "随机数");
            clearInterval(this.lottaryTime);
            clearTimeout(this.lottaryOut);
            console.log(this.a, "随机数");
            this.index = this.a;
            this.off = false;
            this.countnum--;
            //执行吐泡泡
            //机器是否开机

            this.enters = true;
            this.onStartDevice(2, 1);
            setTimeout(() => {
              this.enters = false;
            }, 6000);

            if (this.countnum > 0 && this.exit) {
              console.log(this.count, "list");
              this.timesTim = setInterval(() => {
                if (this.times < 1) {
                  this.times = 0;
                } else {
                  this.times = this.times - 1;
                }
              }, 1000);
              this.yanshiOut = setTimeout(() => {
                //结束吐泡泡
                clearInterval(this.timesTim);
                console.log("结束吐泡泡");

                //并重新开始计时
                this.times = 59;
                if (!this.exit) {
                  this.enter();
                  console.log("并重新开始计时");
                }
              }, 65000);
            } else {
              // this.count = 0;
              console.log(this.count, "计数器");
              this.offbtn = true;
              clearTimeout(this.yanshiOut);
            }
          } else {
            if (this.a < this.lottaryList.length - 1) {
              this.a++;
            } else {
              this.a = 0;
            }
          }
        } else {
          if (this.a < this.lottaryList.length - 1) {
            this.a++;
          } else {
            this.a = 0;
          }
        }

        console.log(this.a);
      }, 200);
      this.lottaryOut = setTimeout(() => {
        this.off = true;
      }, 3000);
    },
    //限制1-100
    handleChange() {
      this.count = 0;
      console.log(this.countnum, "chang事件");
      // 通过正则表达式判断输入是否符合要求
      if (/^(0|[1-9][0-9]*)$/.test(this.countnum)) {
        // 转换为整数并限制范围为1-100
        let num = parseInt(this.countnum);
        if (num < 1) {
          num = 0;
        } else if (num > 100) {
          num = 100;
        }
        this.countnum = num;
        console.log(this.countnum);
      } else {
        // 不符合要求则清空输入框
        this.countnum = 0;
        console.log(this.countnum);
      }
    },
    //数据的请求
    getList() {
      this.isShowPopup = false;
      let data = {
        limit: 1,
        status: 1, // 是否在线
        dianweiid: this.dianwei,
        hotel_id: this.hotel_id,
        is_bind_hotel: true,
      };
      console.log(data, "aaaa");
      this.$u.api
        .getHotelMachines(data)
        .then((res) => {
          console.log(res, "列表数据1");
          this.total = res.total;
          let data2 = {
            limit: this.total,
            status: 1, // 是否在线
            dianweiid: this.dianwei,
            hotel_id: this.hotel_id,
            is_bind_hotel: true,
          };
          console.log(data2, "参数");
          this.$u.api.getHotelMachines(data2).then((res) => {
            console.log(res, "列表数据2");
            this.lottaryList = res.data||[];
            console.log(this.lottaryList);
          });
        })
        .then();
    },
    //停止任务

    outLogin() {
      this.exit = false;
      this.offbtn = true;
      this.count = 0;
      console.log("停止任务");
      clearInterval(this.lottaryTime);
      if (this.oks) {
        this.onStartDevice(0, 0);
      }
      uni.navigateBack({
        delta: 1,
      });
      console.log(1, "---");
    },
    //事件处理函数
    tims(a) {
      let b;
      if (a < 10) {
        b = "0" + a;
      } else {
        b = a;
      }
      return b;
    },
    //数字处理最小为0
    nums(a) {
      let b;
      if (a) {
        if (a < 0) {
          b = 0;
        } else {
          b = a;
        }
      } else {
        b = 0;
      }

      return b;
    },
    //出泡泡
    onStartDevice(channel, time) {
      let data = {
        device_sn: this.lottaryList[this.index].device_sn, // 设备编号
        channel: channel, // 命令
        length_time: time, // 分钟
      };
      console.log("启动设备结果参数 3 ：", data);
      this.$u.api.startUM(data).then((res) => {
        console.log("启动设备结果4 ：", res);
        this.isShowSuccess("操作成功");
        this.oks = true;
      });
    },
  },

  onLoad(opt) {
    this.fromData = opt?.from;
    if (this.fromData == "place") {
      //点位来的
      this.dianwei = opt.dianwei;
      this.hotel_id = opt.hotel_id;
      this.hotel_num = opt.hotel_num;
      this.getList();
    }
  },
};
</script>

<style lang="scss">
page {
  background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  // border: 1px solid #000;
  text-align: center;
  padding: 15rpx;
  // margin: 180rpx auto;
}

.lotter-box {
  width: 368rpx;
  border: 1rpx solid red;
  /* display: flex;
            justify-content: space-between;
            flex-wrap: wrap; */
  margin: 0 auto;
  overflow: hidden;
}

.red {
  color: red;
}

.pie {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-align: center; */
  width: 50rpx;
  height: 50rpx;
  border: 1rpx solid #000;
  margin: 20rpx;
}

.btn {
  margin: auto;
  width: 560rpx;

  padding: 0 30rpx;
  margin-top: 30rpx;

  :nth-child(1) {
    margin-bottom: 15rpx;
  }

  ::v-deep .u-btn {
    height: 72rpx !important;
  }
}

.lotteryInp {
  // height: 10rpx;
  width: 80rpx;
  height: 70rpx;
  // padding: 5rpx 20rpx;
  border: 1px solid #000;
  text-align: center;
}

.lottery-btn {
  border: 1px solid #000;
  display: flex;
  align-items: center;
  width: 200rpx;
  margin: 20rpx auto;
}

.lottery-title {
  color: #555;
}

.lottery-numpie {
  padding: 15rpx 0;
  width: 560rpx;
  background-color: white;
  box-shadow: 4rpx 4rpx 15rpx rgb(197, 196, 196);
  margin: 20rpx auto;
  // border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;

  .lot-num-pie {
    // border: 1px solid #000;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    text {
      font-weight: bold;
      padding: 5rpx 35rpx;
    }

    :nth-child(1) {
      font-size: 30rpx;
    }
  }

  .lot-num-pie:nth-child(2) {
    border-left: 1rpx solid #d1cfcf;
    border-right: 1rpx solid #d1cfcf;
  }

  .lot-num-color {
    font-size: 35rpx;
    color: #0eade2;
  }
}

.lottery-bakc {
  margin: auto;
  // border-radius: 50%;
  height: 540rpx;
  // border: 1px solid #000;
  width: 600rpx;
  // border: 1px solid #000;
  position: relative;

  image {
    width: 100%;
    height: 100%;
  }

  .lottory-dis-input {
    top: 200rpx;
    left: 128rpx;
    position: absolute;
    border-radius: 15rpx;
    background-color: #dbdbdb;
    box-shadow: 0rpx 0rpx 15rpx rgb(179, 177, 177) inset;
    // border: 1px solid #000;
    height: 65rpx;
    width: 350rpx;
    margin: 20rpx auto;
    text-align: center;
    font-size: 35rpx;
    // color: orangered;
    font-weight: bold;
  }
}

.lottory-num-input {
  border-radius: 15rpx;
  background-color: #dbdbdb;
  // border: 1px solid #000;
  height: 65rpx;
  width: 250rpx;
  margin: 20rpx auto;
  text-align: center;
  font-size: 40rpx;
  color: orangered;
  font-weight: bold;
}
</style>